<template>
	<view class="xy-menu tc m-lr-30 p-lr-15 p-t-30" :class="'col-'+data.params.colnum" :style="{'background-color':data.params.bgColor,'border-radius':data.params.borderRadius+'rpx'}"> 
		<view class="title flex p-lr-20 m-b-30" v-if="data.params.title" :style="{color:data.params.textColor}">
			<view class="l tb">{{data.params.title}}</view>
			<view class="r ts-26 flex m-l-auto tc-999" v-if="data.params.linktitle" @tap="onLink(data.params.link)">
				{{data.params.linktitle}}
				<text class="xyicon icon-right ts-34"></text>
			</view>
		</view>
		<div class="list flex">
			<view class="item m-b-40" v-for="(menu, keys) in data.data" :key="keys">
				<block v-if="menu.link == 'share'">
					<button open-type="share">
						 <image :src="$xyfun.image(menu.image)" />
						 <view :style="{color:data.params.textColor}" class="name m-t-15 lh-30 ts-30">{{menu.name}}</view>
					</button>
				</block>
				<block v-else-if="menu.link == 'contact'">
					<button open-type="contact">
						 <image :src="$xyfun.image(menu.image)" />
						 <view :style="{color:data.params.textColor}" class="name m-t-15 lh-30 ts-30">{{menu.name}}</view>
					</button>
				</block>
				<block v-else>
					<button @tap="onLink(menu.link)">
						<image :src="$xyfun.image(menu.image)" />
						<view :style="{color:data.params.textColor}" class="name ts-30 lh-30 m-t-15">{{menu.name}}</view>
					</button>
				</block>
			</view>
		</div>
	</view>
</template>
<script>
	export default {
		name: "xyMenu",
		props: {
			data: {
				type: Object,
				default: function() {
					return {
						name: '菜单组件',
						type: 'menu',
						params: [],
						data: []
					}
				}
			}
		},
		data() {
			return {

			}
		},
		methods:{
			async onLink(url){
				this.$xyfun.to(url);
			}
		}
	}
</script>
<style lang="scss">
	.xy-menu{
		width: 660rpx;
		.item{
			width: 33.3%;text-align: center;
			button{
				background: none; padding: 0;margin: 0;
			}
			button::after{border: none;}
		}
		image{width: 90rpx;height: 90rpx;}
	}
	.xy-menu.col-4{
		.item{width: 25%;}
		image{width: 80rpx;height: 80rpx;}
	}
	.xy-menu.col-5{
		.item{width: 20%;}
		image{width: 70rpx;height: 70rpx;}
	}
</style>
